<template>
  <SingerSong :total="total" @click-item="goSingerDetail" @chooseStyle="chooseStyle" @pageChange="pageChange"
    :is-song="false" :sing-list="singerList" :titles="singerStyle" />
</template>

<script setup lang="ts">
import { ref } from "vue"
import SingerSong from "../components/SingerSong.vue"
import { IPageInfo, ISingerItem } from "@/fetch/type";
import { getSingerList } from "@/fetch/singer.ts"
import { useDetail } from "@/utils/useDetail";
const pageInfo = ref<IPageInfo>({ page: 1, pageSize: 15 })
const total = ref(0)
const singerList = ref<ISingerItem[]>([])
const loadingInstance = ElLoading.service({ fullscreen: false, body: true })

const getSingers = async (pageInfo: IPageInfo, sex?: string) => {
  const { data } = await getSingerList(pageInfo, sex)
  loadingInstance.close()
  singerList.value = data.data.records
  total.value = data.data.total
}


getSingers(pageInfo.value)
const pageChange = async (page: number, style?: string) => {
  console.log(style)
  pageInfo.value.page = page
  getSingers({ ...pageInfo.value, page })

}

const chooseStyle = (style: string) => {
  const sty = singerStyle.find(item => item.name == style)?.type
  pageInfo.value.page = 1
  getSingers({ ...pageInfo.value, page: 1 }, sty)
}
const { goSingerDetail } = useDetail()

const singerStyle = [
  {
    name: "全部歌手",
    type: "-1",
  },
  {
    name: "男歌手",
    type: "1",
  },
  {
    name: "女歌手",
    type: "0",
  },
  {
    name: "组合歌手",
    type: "2",
  },
];

</script>
<style lang="scss" scoped></style>